import React from 'react';
import { PopConfirm } from '@teamix/ui';
import intl from '../../../../../../../../../../locale';

export default class Confirm extends React.Component {
  state = {
    visible: false,
  };

  onCancel = () => {
    this.setState({
      visible: false,
    });
  };

  onConfirm = () => {
    this.setState({
      visible: false,
    });

    this.props.onChange();
  };

  onVisibleChange = (visible) => {
    this.setState({
      visible,
    });
  };

  render() {
    const { visible } = this.state;
    const { needPopConfirm, trigger } = this.props;
    if (!needPopConfirm) {
      return React.cloneElement(trigger, { onChange: this.props.onChange });
    }
    return (
      <PopConfirm
        triggerType="click"
        align="br"
        title={intl.get({
          id: 'code-assets.containers.cryptoForm.cryptoSwitchConfirm.Note',
          defaultMessage: '请注意',
        })}
        popupStyle={{
          maxWidth: 'none',
          width: 340,
        }}
        content={
          <div className="crypto-warn-help">
            {intl.get({
              id: 'code-assets.containers.cryptoForm.cryptoSwitchConfirm.ToDisableTheEncryptionService',
              defaultMessage: '关闭加密服务需先执行仓库解密，解密期间请勿禁用服务密钥，否则将',
            })}
            <span className="red">
              {intl.get({
                id: 'code-assets.containers.cryptoForm.cryptoSwitchConfirm.TheWarehouseDataIsUnavailable',
                defaultMessage: '导致仓库数据不可用',
              })}
            </span>
            。<br />
            {intl.get({
              id: 'code-assets.containers.cryptoForm.cryptoSwitchConfirm.AreYouSureYouWant',
              defaultMessage: '确定要关闭仓库加密吗？',
            })}
          </div>
        }
        onConfirm={this.onConfirm}
        onCancel={this.onCancel}
        visible={visible}
        onVisibleChange={this.onVisibleChange}
        trigger={trigger}
        type="warning"
      />
    );
  }
}
